<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet/less" href="./css/banner.less">
    <script src="/js/less.js"></script>
    <script src="./data/banner.js"></script>
</head>

<body>
    <div class="banner">
        <ul class="banner-list">
        </ul>
        <div class="btn">
            <button class="pre">上一个</button>
            <button class="next">下一个</button>
        </div>
    </div>
    <script>
        var baseURL = "https://res.vmallres.com"
        var bannerList = document.querySelector(".banner-list")
        var prebtn = document.querySelector(".pre")
        var nextbtn = document.querySelector(".next")
        var active = document.querySelector(".active")
        var activeEL = null
        var timer = null

        for (var i = 0; i < banners.length; i++) {
            var bannerdata = banners[i]
            var bannerli = document.createElement("li")
            bannerli.classList.add("item")
            var imgEL = document.createElement("img")

            imgEL.src = `${baseURL}${bannerdata.imgUrl}`
            if (i == 0) {
                bannerli.classList.add("active")
                    // bannerli.classList.add("active")
                activeEL = bannerli
                    // console.log(prebtn, nextbtn, activeEL)
            }
            bannerli.append(imgEL)
            bannerList.append(bannerli)
        }
        var preindex = 0
        var currentindex = 0
        nextbtn.onclick = function() {
            bannernext()
        }
        prebtn.onclick = function() {
            preindex = currentindex
            currentindex--
            // console.log(bannerList.children.length)
            if (currentindex == -1) {
                currentindex = bannerList.children.length - 1
            }
            var currentitemEL = bannerList.children[currentindex]
            var preitemEL = bannerList.children[preindex]
            preitemEL.classList.remove("active")
            currentitemEL.classList.add("active")
        }
        startTimer()
        bannerList.onmouseenter = function() {
            stopTimer()
                // console.log(timer)
        }
        bannerList.onmouseleave = function() {
            startTimer()
                // console.log(timer)

        }

        function bannernext() {
            preindex = currentindex
            currentindex++
            if (currentindex == bannerList.children.length) {
                currentindex = 0
            }
            var currentitemEL = bannerList.children[currentindex]
            var preitemEL = bannerList.children[preindex]
            preitemEL.classList.remove("active")
            currentitemEL.classList.add("active")
        }

        function startTimer() {
            timer = setInterval(function() {
                bannernext()
            }, 3000)
        }

        function stopTimer() {
            // console.log(timer)
            clearInterval(timer)
        }
    </script>
</body>

</html>